<template>
  <PCard class="Change-tax-payment-mode-con" :isCardBorder="true" :shadow="'never'" :isHeadBottomBorder="true"
    :bodyStyle="{ width: '100%' }">
    <div slot="header" class="card-title">
      <span>变更纳税模式</span>
    </div>
    <div class="item">
      <div class="label">变更企业</div>
      <div class="value">{{ info.entName }}</div>
    </div>
    <div class="item">
      <div class="label">现用缴税模式</div>
      <div class="value bl">{{ TaxModeList[info.oldTaxMode] }}</div>
    </div>
    <div class="item">
      <div class="label">期望缴税模式</div>
      <div class="value">
        <a-card>
          <a-radio-group v-model="value" @change="onChange" class="herd" style="width: 100%;">
            <!-- width:25%;text-align:left -->
            <a-card-grid :style="itemStyle" :hoverable="false">
              <a-radio :value="1" :disabled="TaxModeUseList[0]">
                查账征收
              </a-radio>
            </a-card-grid>

            <a-card-grid :style="itemStyle" :hoverable="false">
              <a-radio :value="2" :disabled="TaxModeUseList[1]">
                核定征收-双定
                <!-- <a-badge :count="'推荐'" :offset="[30,7]">
                </a-badge> -->
              </a-radio>
            </a-card-grid>

            <a-card-grid :style="itemStyle" :hoverable="false">
              <a-radio :value="3" :disabled="TaxModeUseList[2]">
                核定征收-征收率
              </a-radio>
            </a-card-grid>


            <!-- <a-card-grid :style="itemStyle" :hoverable="false">
              <a-radio :value="4" :disabled="TaxModeUseList[3]">
                核定征收-应纳税所得率
              </a-radio>
            </a-card-grid> -->

          </a-radio-group>


          <div class="body">


            <a-card-grid :style="itemStyle" :class="TaxModeUseList[0]&&'disabledItem'" :hoverable="false">
              <div class="yd">适用于企业</div>
              <!-- <div class="yd">可享受税款优惠政策</div>
              <div class="yd">变更费用：500元</div> -->
            </a-card-grid>
            <a-card-grid :style="itemStyle" :class="TaxModeUseList[1]&&'disabledItem'" :hoverable="false">
              <div class="yd">适用于个体户</div>
              <div class="yd">不具备建账建制条件（能力）的</div>
              <div class="yd">月收入不超过增值税、个人所得税双免政策额度</div>
            </a-card-grid>
            <a-card-grid :style="itemStyle" :class="TaxModeUseList[2]&&'disabledItem'" :hoverable="false">
              <div class="yd">适用于个体户</div>
              <div class="yd">不具备建账建制条件（能力）的</div>
              <div class="yd">年开票不超过470万</div>
            </a-card-grid>
            <!-- <a-card-grid :style="itemStyle" :class="TaxModeUseList[3]&&'disabledItem'" :hoverable="false">
              <div class="yd">适用于个体户</div>
              <div class="yd">需提供成本凭证，记账凭证等</div>
              <div class="yd">变更费用：免费</div>
            </a-card-grid> -->

          </div>

        </a-card>
      </div>
    </div>
    <div class="item">
      <!-- <div class="label">现用缴税模式</div> -->
      <!-- <div class="value bl">核定征收-双定</div> -->
      <a-button type="primary" block @click="tjEvent">
        提交
      </a-button>
    </div>
  </PCard>
</template>

<script>
import getDataForDB from '@/api/qsbserviceEnterprise'

export default {
  name: 'ChangeTaxPaymentMode',
  props: {
    coloseEvent: { type: Function },
    serviceInfo: { type: Object }
  },
  data() {
    return {
      TaxModeUseList:[false,false,false,true],
      itemStyle:{width:'25%'},
      value: '',
      TaxModeList: {
        1: '查账征收',
        2: '核定征收-双定',
        3: '核定征收-征收率',
        4: '核定征收-应纳税所得率',
      },
      info: {
        entName: '--',// 核定征收-双定
        oldTaxMode: '',
        id: ''
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    tjEvent() {
      // this.serviceInfo.index = 4
      // this.serviceInfo.data = this.value
      if(!this.value){
        this.$message.warning('必须选择一个期望缴税模式')
        return false
      }
      getDataForDB('税务变更信息提交', { entId: this.serviceInfo.data.id, newTaxMode: this.value }).then(res => {
        // console.log('税务变更信息提交===>', res);
        if (res.code == 200) {
          this.$message.success('提交成功')
          this.serviceInfo.index = 14
          this.coloseEvent && this.coloseEvent(this.serviceInfo)
        } else {
          this.$message.success(res.message)
        }
      })

    },
    onChange(e) {
      console.log('radio checked', e.target.value);
    },
    setOldTaxMode(oldTaxMode){
      //    现用 核定征收-双定 2=》核定征收-征收率 3   查账征收 1
      // 		现用 核定征收-征收率 3 =》 查账征收 1
      // 		现用 查账征收 =》
      const tempArr = [true,true,true,true]
      const tempList = { 2: [2,0], 3: [0] }
      const temp = oldTaxMode
      // this.TaxModeUseList[temp] = true
      tempList[temp]&&tempList[temp].forEach(item=>{
        tempArr[item] = false
      })
      this.TaxModeUseList = tempArr
      // console.log('setOldTaxMode===>',this.TaxModeUseList,temp,oldTaxMode)
    },
    init() {
      getDataForDB('获取税务变更信息', { entId: this.serviceInfo.data.id }).then(res => {
        // 原征收方式 1-查账征收2-核定征收-双定3-核定征收-征收率4-核定征收-应纳税所得率
        // console.log('获取税务变更信息===>', res);
        this.info.entName = res.result.entName
        this.info.oldTaxMode = res.result.oldTaxMode
        // this.info.oldTaxMode = 4
        this.info.id = res.result.id
        this.setOldTaxMode(this.info.oldTaxMode)
      })
    },
  }
}
</script>

<style lang="less">
.Change-tax-payment-mode-con {
  width: 100%;

  .card-title {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }

  .item {
    width: 100%;
    line-height: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 10px;
    margin: 10px;

    .label {
      width: 140px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }

    .value {
      flex: 1;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;

      &.bl {
        color: #4167E8;
      }

      .yd {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding-left: 10px;
      }

      .yd::before {
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        background: #4167E8;
        margin: 8px 4px 0 0;
        // margin-right: 5px;
        // margin-top: 8px;

      }

      .ant-card-body{
        padding: 0px;
        .herd{
          display:flex;
          .ant-card-grid{
            flex:1
          }
        }
        .body{
          display:flex;
          .ant-card-grid{
            flex:1
          }
        }
      }
      .disabledItem{
        color:#c1c1c1;
      }
    }
  }

  .ant-card-grid {
    padding: 10px 5px;

  }
}
</style>
